<template>
  <div class="vm">
    <h2 class="h-title">加载ArcGIS feature</h2>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import EsriJSON from 'ol/format/EsriJSON';
import VectorSource from 'ol/source/Vector';

import {Fill, Stroke, Style} from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {createXYZ} from 'ol/tilegrid';
import {fromLonLat} from 'ol/proj';
import {tile as tileStrategy} from 'ol/loadingstrategy';

import XYZ from 'ol/source/XYZ'

import $ from 'jquery'



export default {
  name: 'ArcGISFeatures',
  data () {
    return {
      map: null
    }
  },
  methods: {
    initMap () {
      // 地图实例
      this.map = new Map({
        target: "map", 
        layers: [ 
          new TileLayer({
            source: new XYZ({
              url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          }),
          new TileLayer({
            source: new XYZ({
              url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            })
          })
      
        ],
        view: new View({ 
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [-97.6114, 38.8403],
          zoom: 5 // 地图缩放级别（打开页面时默认级别）
        })
      })

        // 
    //   var serviceUrl = 'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/FeatureServer/0';//
        var serviceUrl = 'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/MapServer/0';//https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/MapServer/0

        var esrijsonFormat = new EsriJSON();

        var styleCache = {
            'ABANDONED': new Style({
                fill: new Fill({
                color: 'rgba(225, 225, 225, 255)',
                }),
                stroke: new Stroke({
                color: 'rgba(0, 0, 0, 255)',
                width: 0.4,
                }),
            }),
            'GAS': new Style({
                fill: new Fill({
                color: 'rgba(255, 0, 0, 255)',
                }),
                stroke: new Stroke({
                color: 'rgba(110, 110, 110, 255)',
                width: 0.4,
                }),
            }),
            'OIL': new Style({
                fill: new Fill({
                color: 'rgba(56, 168, 0, 255)',
                }),
                stroke: new Stroke({
                color: 'rgba(110, 110, 110, 255)',
                width: 0,
                }),
            }),
            'OILGAS': new Style({
                fill: new Fill({
                color: 'rgba(168, 112, 0, 255)',
                }),
                stroke: new Stroke({
                color: 'rgba(110, 110, 110, 255)',
                width: 0.4,
                }),
            }),
        };

        // 
        var vectorSource = new VectorSource({
            loader: function (extent, resolution, projection) {
                var url =
                serviceUrl +
                '/query/?f=json&' +
                'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
                encodeURIComponent(
                    '{"xmin":' +
                    extent[0] +
                    ',"ymin":' +
                    extent[1] +
                    ',"xmax":' +
                    extent[2] +
                    ',"ymax":' +
                    extent[3] +
                    ',"spatialReference":{"wkid":102100}}'
                ) +
                '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
                '&outSR=102100';
                $.ajax({
                url: url,
                dataType: 'jsonp',
                success: function (response) {
                    if (response.error) {
                    alert(
                        response.error.message + '\n' + response.error.details.join('\n')
                    );
                    } else {
                    // dataProjection will be read from document
                    var features = esrijsonFormat.readFeatures(response, {
                        featureProjection: projection,
                    });
                    if (features.length > 0) {
                        vectorSource.addFeatures(features);
                    }
                    }
                },
                });
            },
            strategy: tileStrategy(
                createXYZ({
                tileSize: 256,
                })
            ),
        });

        // 
        var vector = new VectorLayer({
            source: vectorSource,
            style: function (feature) {
                var classify = feature.get('activeprod');
                return styleCache[classify];
            },
        });

        this.map.addLayer(vector)









    }
  },
  mounted () {
    this.initMap();
  }
}
</script>

<style lang="scss" scoped>
  
</style>